<template>
  <div class="MainHeader">
    <el-container>
      <!-- 第一部分 -->
      <el-header height=40px>
        <div class="HeaderTop">
          <div class="HeaderTopContenet"> 
            <span v-if="!ifLogin">欢迎来到科惠网，请&nbsp;<a href="#" class="cff2" @click="goLogin">登录</a>&nbsp;|&nbsp;<a href="#" class="cff2"  @click="goRegister">注册</a></span>
            <span v-if="ifLogin" style="display:flex">欢迎来到科惠网，用户{{UserName}}&nbsp;&nbsp;&nbsp;<el-link type="warning">退出登录</el-link> </span>
            <span> 
              <!-- <el-popover placement="top-start"  width="80" trigger="hover" transition>
                <el-image :src="WebQrcode"></el-image> 
                <el-button slot="reference" type="text"><i class="el-icon-s-promotion" ></i>&nbsp;网站</el-button>
              </el-popover> -->
              <el-popover placement="top-start"  width="80" trigger="hover" transition>
                <el-image :src="WeChatQrcode"></el-image> 
                <el-button slot="reference" type="text">&nbsp;&nbsp;<i class="el-icon-s-promotion"></i>&nbsp;微信公众号</el-button>
              </el-popover>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全国统一客服热线：<strong class="TelNum">0724-6095052</strong>
            </span>
          </div>        
        </div>
      </el-header>
      <!-- 第二部分 -->
      <div class="HeaderMid">
        <img :src="srclogo" alt="a" style="width:100%;height:170%">
      </div>
      <!-- 第三部分 -->
      <el-footer height=40px class="HeaderBottom">
        <div class="HeaderBottomContent">
          <el-button type="text" icon="el-icon-menu" style="width:225px;height:40px;background-color:orangered" @click="GoSYKJJ">科惠 十堰</el-button>
          <el-button type="text" @click="handleButtonA" class="bt">首页</el-button>
          <el-button type="text" @click="handleButtonB" class="bt">精品成果</el-button>
          <el-button type="text" @click="handleButtonC" class="bt">重点需求</el-button>
          <el-button type="text" @click="handleButtonD" class="bt">机构专柜</el-button>
          <el-button type="text" @click="handleButtonE" class="bt">专家智库</el-button>
          <el-button type="text" @click="handleButtonF" class="bt">政策动态</el-button>
          <el-button type="text" @click="handleButtonG" class="bt">关于我们</el-button>
        </div>
      </el-footer>
   </el-container>
  </div>
</template>

<script>
export default {
  name: 'MainHeader',
  data () {
    return {
      // 网站二维码 图片待更改
      // WebQrcode : require('../assets/weblogo.jpg'),
      // 微信公众号二维码 图片待更改
      WeChatQrcode : require('../assets/wxgzh.jpg'),
      // 搜索框默认选项
      radio1 : "成果",
      // 搜索框输入内容
      searchInput : "",
      // 是否登录
      ifLogin: false,
      // 登录的用户
      UserName: 'xxx',
      
      srclogo: require('../assets/t2.png'),
    }
  },
  methods: {
    handleButtonA(){
      this.$router.push({path:'/HomePage'});
    },
    handleButtonB(){
      this.$router.push({path:'/SandTAchievements'})
    },
    handleButtonC(){
      this.$router.push({path:'/TechRequirements'})
    },
    handleButtonD(){
      this.$router.push({path:'/IndustrialCluster'})
    },
    handleButtonE(){
      this.$router.push({path:'/ExpertsThinkTank'})
    },
    handleButtonF(){
      this.$router.push({path:'/PolicyInterpretation'})
    },
     handleButtonG(){
      this.$router.push({path:'/About'})
    },
    GoSYKJJ(){
       window.open('http://keji.shiyan.gov.cn//',"_blank");
    },
    handleSearch(){
      console.log("搜索");
    },
    goLogin(){
      console.log("goLogin");
      this.$router.push({path:'/user/login'})
    },
    goRegister(){
      console.log("goRegister");
      this.$router.push({path:'/user/register'})
    }
  }
}
</script>

<style scoped>
.MainHeader{
  /* width: 100%; */
}
.el-header{
  padding: 0px;
}
.HeaderTop{
  position:fixed;
  top: 0px;
  width: 100%;
  height: 40px;
  border: 1px solid darkgray;
  background-color:white;
  font-size: 14px;
  z-index: 10;
}
.HeaderTopContenet{
  width: 1400px;
  height: 40px;
  margin: auto;
  color:gray;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cff2{
  color:dodgerblue;
}
.TelNum{
  color: orangered;
}
.HeaderMid{
  height: 236px;
  width: 100%;
  /* background-image: url('../assets/temp.jpg'); */
  /* background-repeat:no-repeat; */
  /* background-size:100% 100%; */
  /* -moz-background-size:100% 100%; */
}

.HeaderBottom{
  background-color: dodgerblue;
}
.HeaderBottomContent{
  min-width: 1400px;
  width: 74%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.HeaderBottomContent .el-button{
  color: white;
  font-size: 16px;
  height: 40px;
}
.bt{
  width: 100px;
}

.HeaderBottomContent :hover {
	background:linear-gradient(to bottom, #378de5 1%, #0ab3dd 100%);
	background-color:#378de5;
}
</style>
